<template>
  <div class="login-wrapper">
    <div class="logo">
      <img src="@/assets/images/logo.png" alt />
    </div>
    <div class="btn">
      <my-button name="微信授权登录" @btnClick="handleBtnClick" />
      <my-button name="手机验证码登录" :showBg="false" class="phone-login" @btnClick="phoneLogin" />
      <p>
        <span style="padding: 0.1rem 0.3rem" @click="cancel">取消</span>
      </p>
    </div>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
  created () {
    console.log(this.$route)
  },
  methods: {
    cancel () {
      this.$router.push('/home')
    },
    phoneLogin () {
      this.$router.push({
        path: '/login/login-phone',
        query: { redirect_url: this.$route.query.redirect_url }
      })
    },
    handleBtnClick () {
      const redirectUrl = this.$route.query.redirect_url
      let obj = {}
      if (localStorage.getItem('GET_SHARE_INTEGRAL')) {
        obj = JSON.parse(localStorage.getItem('GET_SHARE_INTEGRAL'))
      }
      if (redirectUrl) {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/login/login?return_url=${encodeURIComponent(
                `https://ddsc.izhixiu.cn/front/#${redirectUrl}`
              )}`
            })
          }
        })
      } else if (obj.id) {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/login/login?inviter=${obj.id}`
            })
          }
        })
      } else {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            wx.miniProgram.navigateTo({
              url: '/pages/login/login'
            })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.login-wrapper {
  width: 100%;
  padding: 0 1.12rem;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  .logo {
    width: 2.84rem;
    height: 1.45rem;
    margin: 0 auto;
    margin-top: 1.67rem;
    img {
      width: 100%;
      vertical-align: top;
    }
  }
  .btn {
    width: 100%;
    font-size: 0;
    margin-top: 2.14rem;
    .phone-login {
      margin-top: 0.36rem;
    }
    p {
      margin-top: 0.61rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
    }
  }
}
</style>
